<template>
  <SplitPane v-model="offset">
    <template #left>
      <FormView
        title="代码生成"
        :form-nav="false"
        form-width="96%"
        form-max-width="96%"
        :toolbar-attrs="{ buttons: ['back', 'slot'] }">
        <template #toolbar-button>
          <ToolbarButton type="primary" icon="el-icon-s-tools" label="列配置" @click="showDrawer = true" />
          <ToolbarButton type="primary" icon="el-icon-download" label="下载" @click="downloadCode" />
        </template>
        <FormHolder ref="form" label-width="130px" :model="model">
          <FormItemGroup block-title="后端配置">
            <FormSelect
              v-model="model.dsName"
              :options="datasourceList"
              prop="dsName"
              filterable
              label="数据源"
              required />
            <FormSelect
              v-model="model.tableName"
              :options="tables"
              prop="tableName"
              filterable
              label="数据表"
              required />
            <FormInput v-model="model.moduleName" prop="moduleName" label="模块名称" required />
            <FormInput v-model="model.pkgName" prop="pkgName" label="包名" required />
            <FormInput v-model="model.entityName" prop="entityName" label="实体类名" required />
            <FormSelect
              v-model="model.serviceName"
              prop="serviceName"
              filterable
              :options="serviceNames"
              label="服务名"
              required />
          </FormItemGroup>
          <FormItemGroup block-title="流程相关配置">
            <FormInput v-model="model.flowName" prop="flowName" label="流程名称" required />
            <FormInput v-model="model.docType" prop="docType" label="流程编码" required />
            <FormInput v-model="model.docTypeName" prop="docTypeName" label="文种名称" required />
            <FormInput v-model="model.docType" prop="docType" label="文种名称编码" disabled tips="保持和流程编码一致"/>
            <FormInput v-model="model.entityFullName" prop="entityFullName" label="实体类路径" block required />
            <FormInput v-model="model.path" prop="path" label="路由路径" block required tips="表单页面的文件路径"/>
          </FormItemGroup>
          <FormItemGroup block-title="前端配置">
            <FormInput v-model="model.formName" prop="formName" label="表单标题" required />
            <FormInput v-model="model.frontendDir" prop="frontendDir" label="文件夹路径" required />
            <FormInput v-model="model.requestPath" prop="requestPath" label="接口路径" required />
            <FormInput v-model="model.frontendFilePrefix" prop="frontendFilePrefix" label="前端文件前缀" />
          </FormItemGroup>
        </FormHolder>
      </FormView>
      <ElDrawer :visible.sync="showDrawer" append-to-body direction="ltr" title="列配置">
        <ElTable :data="model.columns" border>
          <TableColumn label="字段名" prop="label" :sortable="false" />
          <TableColumn label="属性名" prop="prop" :sortable="false" />
          <TableColumn label="查询" prop="search" align="center" width="60" :sortable="false">
            <template #default="{ row }">
              <ElCheckbox v-model="row.search" />
            </template>
          </TableColumn>
          <TableColumn label="表格" prop="table" align="center" width="60" :sortable="false">
            <template #default="{ row }">
              <ElCheckbox v-model="row.table" />
            </template>
          </TableColumn>
          <TableColumn label="表单" prop="form" align="center" :sortable="false">
            <template #default="{ row }">
              <ElCheckbox v-model="row.form" />
            </template>
          </TableColumn>
        </ElTable>
      </ElDrawer>
    </template>
    <template #right>
      <ElTabs v-model="activeName" style="background-color: #fff" type="card" class="code-gen">
        <ElTabPane v-for="item in templateList" :key="item.name" lazy :label="item.name" :name="item.name">
          <div style="padding: 10px; font-weight: bold; background-color: #eee">{{ item.path }}</div>
          <FlexScroller :content-scroll="false">
            <CodeEditor v-if="activeName === item.name" :value="item.template" />
          </FlexScroller>
          <ElButton
            id="btn"
            type="text"
            size="small"
            icon="el-icon-document-copy"
            class="gen-copy"
            @click="copyLink(item.template)">
            复制
          </ElButton>
        </ElTabPane>
      </ElTabs>
    </template>
  </SplitPane>
</template>

<script setup>
  import useTemplate from './template'
  import { ref } from 'vue'

  const form = ref(null)
  const showDrawer = ref(false)

  const { download, model, datasourceList, tables, serviceNames, copyLink, templateList } = useTemplate()
  const offset = ref(0.45)
  const activeName = ref(templateList.value[0].name)

  async function downloadCode() {
    await form.value.validate()
    await download()
  }
</script>

<style lang="scss">
  .code-gen {
    height: 100%;

    @include flex-column;

    .el-tabs__header {
      @include flex-not-shrink;
      margin: 0;
    }

    .el-tabs__content {
      @include flex-item;

      .el-tab-pane {
        @include flex-column;
        height: 100%;
      }
    }

    .gen-copy {
      position: absolute;
      top: 4px;
      right: 20px;
    }
  }
</style>
